<template>
  <div class="navCom">
    <ul>
      <li v-for="(val,index) in text" :key="val.name" @click="handover(index,val.path)">
        <i :class="val.ico" :style="index==active?'color:#5706a4':'a'"></i>
        <span>{{val.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import {skip} from 'ulit/skipRouter'
export default {
  data() {
    return {
      text: [
        {
          name: "首页",
          path: "home",
          ico: "iconfont icon-shouye",
        },
        {
          name: "社区",
          path: "dynamic",
          ico: "iconfont icon-shequ",
        },
        {
          name: "发布",
          path: "publish",
          ico: "iconfont icon-fabu3",
        },
        {
          name: "活动",
          path: "activity",
          ico: "iconfont icon-huodong",
        },
        {
          name: "我的",
          path: "mine",
          ico: "iconfont icon-wode",
        },
      ],
      active: 0,
      le:this.$route.name
    };
  },
  computed:{

  },
  methods: {
    handover(index,name) {
      this.active=index
      skip(this,name)
    },
  },
  mounted(){
  },
};
</script>

<style lang="less" scoped>
.navCom > ul {
  display: flex;
  list-style-type: none;
  text-align: center;
  font-size: 1.3rem;
  font-family: "Courier New", Courier, monospace;
  //border-top: 1px solid #ededed;
  box-shadow: 0px 0px 5px #888888;
  background-color: #fff;
  li {
    flex: 1;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    i {
      margin-bottom: 3px;
      font-size: 1.3rem;
    }
    .active {
      color: #5706a4;
    }
  }
}
</style>